<template>
	<view class="user_radar_index box">
		<template v-for="(item,index) in aiDataList">
			<view class="ai_box w100  br_8 bc_fff p_12 box mb_8" :key="index" v-if="index<2">
				<!-- <image :src="item.avatar" mode="" class="ai_icon"></image> -->
				<image :src="ossUrl+'/ai_icon.png'" mode="" class="ai_icon" @click="viewAll"></image>
				<view class="name_box fz_12 fl w100 pb_8">
					<text class="fc_333">{{item.name}}</text>
					<text class="fc_999 pl_12">{{item.timeStr}}</text>
				</view>
				<view class="fc_333 fl w100 lh_19 fz_12">
					<text
						class="mr_5">{{item.type==1?"购买商品":item.type==2?"加入购物车":item.type==3?"收藏商品":item.type==4?"分享商品":item.type==5?"浏览商品":item.type==6?"邀请用户":""}}</text>
					{{item.content}} 
					<text v-if="item.type==6" class="ml_5">注册成功</text>
				</view>
				<view class="fc_333 fl w100 lh_19 fz_12" v-if="item.type==4||item.type==5">
					最近3天{{item.type==4?"分享":"浏览"}}{{item.lookTimes}}次
				</view>
			</view>
		</template>

		<!-- 	<view class="ai_box w100 height_83 br_8 bc_fff p_12 box mb_8">
			<image src="../../../../static/images/ai_icon.png" mode="" class="ai_icon"></image>
			<view class="name_box fz_12 fl w100 pb_8">
				<text class="fc_333">章西</text>
				<text class="fc_999 pl_12">刚刚</text>
			</view>
			<view class="fc_333 fl w100 lh_19 fz_12">
				<text>查看商品</text> 极简风格 超柔舒适 全实木框架+白鹅羽绒靠包
			</view>
			<view class="fc_333 fl w100 lh_19 fz_12">
				最近3天查看6次
			</view>
		</view> -->
		<view class="invitee_box w100 height_287 br_8 box mt_11">
			<view class="title_box">
				<view class="fz_18 fc_fff fb">
					邀请用户数
				</view>
				<view class="invite_btn width_80 height_29 br_4 fz_12 lh_29 fc" @click="iviteUser">
					继续邀请
				</view>
			</view>
			<view class="hitory_box box mt_12 mb_12 height_126 bc_fff br_6">
				<view class="history_title mb_4">
					<view class="fc_666 fz_12">
						历史邀请（人）
					</view>
					<u-icon @click="bindUserInvite" name="arrow-right" color="#666666"></u-icon>
				</view>
				<view class="history_number fc_333 mt_8 fz_16 fb">
					{{inviteData.totalNum||0}}
				</view>
				<view class="card_box mt_8">
					<view class="single_card height_59 box br_4 width_148}">
						<view class="fc_333 fz_12 mt_4">
							今日邀请(人)
						</view>
						<view class="fb fz_16 fc_333">
							{{inviteData.todayNum||0}}
						</view>
					</view>
					<view class="single_card height_59 box br_4 width_148">
						<view class="fc_333 fz_12 mt_4">
							本月邀请(人)
						</view>
						<view class="fb fz_16 fc_333">
							{{inviteData.monthNum||0}}
						</view>
					</view>
				</view>

			</view>
			<view class="title_box">
				<view class="fz_18 fc_fff fb">
					会员统计
				</view>
			</view>
			<view class="cols_box w100 fc_fff">
				<view class="grid fc_fff fc" v-for="(item,index) in gridList" :key="index">
					<view class="fc_fff fz_16 fb mt_12 mb_4">
						{{item.value}}
					</view>
					<view class="fc_fff fz_16">
						{{item.label}}
					</view>
				</view>
			</view>

		</view>
		<view class="share_box mt_16">
			<view class="share_title fb fz_18 mb_8">
				商品分享
			</view>
			<view class="share_content w100 box height_126 bc_fff br_6">
				<view class="history_title mb_4">
					<view class="fc_666 fz_12">
						历史分享（次）
					</view>
					<!-- <u-icon name="arrow-right" color="#666666"></u-icon> -->
				</view>
				<view class="history_number fc_333 mt_8 fz_16 fb">
					{{shareDataDto.historyNum||0}}
				</view>
				<view class="card_box mt_8">
					<view class="single_card height_59 box br_4 width_148}">
						<view class="fc_333 fz_12 mt_4">
							我的分享（次）
						</view>
						<view class="fb fz_16 fc_333">
							{{shareDataDto.myNum||0}}
						</view>
					</view>
					<view class="single_card height_59 box br_4 width_148">
						<view class="fc_333 fz_12 mt_4">
							邀请好友分享（次）
						</view>
						<view class="fb fz_16 fc_333">
							{{shareDataDto.friendNum||0}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="share_box mt_16">
			<view class="share_title fb fz_18 mb_8">
				交易统计
			</view>
			<view class="consum_box w100  box bc_fff br_6">
				<view class="consum_count" style="text-align: center; padding-top: 16rpx;">
					<view class="single_count fc_333" >
						<view class="fz_12 ">
							邀请用户消费次数(次)
						</view>
						<view class="fz_24 fb mt_4 mb_8 text-center" >
							{{tradeDataDto.tradeNum||0}}
						</view>
					</view>
					<view class="single_count fc_333">
						<view class="fz_12 ">
							邀请用户消费总额( 元)
						</view>
						<view class="fz_24 fb mt_4 mb_8 text-center">
							{{tradeDataDto.tradeCost||0}}
						</view>
					</view>
				</view>
				<view class="times_box height_67 br_4 w100"  :class="tradeDataDto.ratioNum&&tradeDataDto.ratioNum>0?'red_back':'green_back'"  style=" position: relative; padding-bottom:80rpx; text-align: left; align-items:left;">
					<view class="single_time fc_333 fl">
						<view class="fz_12 mt_4 mb_10 fc_999">
							本月消费(次)
						</view>
						<view class="fz_16 fb">
							{{tradeDataDto.thisMonthNum||0}}
						</view>
					
					</view>
					<view class="single_time fl">
						<view class="fz_12 mt_4 mb_10 fc_999">
							上月消费(次)
						</view>
						<view class="fz_16 fb">
							{{tradeDataDto.preMonthNum||0}}
						</view>	
					</view>
					<view style="position: absolute; bottom: 24rpx; left: 0;"
						:class="tradeDataDto.ratioNum&&tradeDataDto.ratioNum>0?'single_time percent_box red_box':'single_time percent_box green_box'">
						<view class="">
							<image
								:src="tradeDataDto.ratioNum&&tradeDataDto.ratioNum>0?ossUrl+'/radar_data_up.png':ossUrl+'/radar_data_down.png'"
								class="green_arrow" mode="">
							</image>
							</image>
							<text class="fz_16 fb ml_5">{{tradeDataDto.ratioNum||0}}%</text>
							<text class="fz_12 mt_4 ml_10">
							{{tradeDataDto.ratioNum&&tradeDataDto.ratioNum>0?'环比上升':'环比下降’'}}
							</text>
						</view>
						
					</view>
					<!-- <view class="single_time percent_box green_box">
						<view class="">
							<image src="../../../static/images/direction／caret-down@2x.png" class="green_arrow" mode="">
							</image>
							<text class="fz_16 fb ml_5">40%</text>
						</view>
						<view class="fz_12 mt_4">
							环比下降
						</view>
					</view> -->
				</view>
				<view class="times_box height_67 br_4 w100 mt_10"  :class="tradeDataDto.ratioCost&&tradeDataDto.ratioCost>0?'red_back':'green_back'"  style=" position: relative; padding-bottom:80rpx; text-align: left; align-items:left;">
					<view class="single_time fc_333 fl">
						<view class="fz_12 mt_4 mb_10 fc_999">
							本月消费(元)
						</view>
						<view class="fz_16 fb">
							{{tradeDataDto.thisMonthCost||0}}
						</view>
					
					</view>
					<view class="single_time fl">
						<view class="fz_12 mt_4 mb_10 fc_999">
							上月消费(元)
						</view>
						<view class="fz_16 fb">
							{{tradeDataDto.preMonthCost||0}}
						</view>	
					</view>
					<view style="position: absolute; bottom: 24rpx; left: 0;"
						:class="tradeDataDto.ratioCost&&tradeDataDto.ratioCost>0?'single_time percent_box red_box':'single_time percent_box green_box'">
						<view class="">
							<image
								:src="tradeDataDto.ratioCost&&tradeDataDto.ratioCost>0?ossUrl+'/radar_data_up.png':ossUrl+'/radar_data_down.png'"
								class="green_arrow" mode="">
							</image>
							</image>
							<text class="fz_16 fb ml_5">{{tradeDataDto.ratioCost||0}}%</text>
							<text class="fz_12 mt_4 ml_10">
							{{tradeDataDto.ratioCost&&tradeDataDto.ratioCost>0?'环比上升':'环比下降’'}}
							</text>
						</view>
						
					</view>
					<!-- <view class="single_time percent_box green_box">
						<view class="">
							<image src="../../../static/images/direction／caret-down@2x.png" class="green_arrow" mode="">
							</image>
							<text class="fz_16 fb ml_5">40%</text>
						</view>
						<view class="fz_12 mt_4">
							环比下降
						</view>
					</view> -->
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import api from "@/service/config/api";
	export default {
		props: {
			userType: {
				default: 4,
				type: Number,
			},
			normalUser: {
				default: 1,
				type: Number,
			},
			ossUrl: {
				default: "",
				type: String,
			},
			tenantId: {
				default: "",
				type: String,
			},
		},
		data() {
			return {
				gridList: [{
					label: "普通会员",
					value: 0,
					key: "ordinaryNum"
				}, {
					label: "尊享会员",
					value: 0,
					key: "exclusiveNum"
				}, {
					label: "联盟会员",
					value: 0,
					key: "allianceNum"
				}, {
					label: "创业会员",
					value: 0,
					key: "pioneerNum"
				}],
				aiDataList: [],
				dateView: {},
				timer: null,
				startTime: null,
				inviteData: {},
				tradeDataDto: {},
				shareDataDto: {}
			}
		},
		watch: {
			normalUser(newValue, oldValue) {
				// 数据变化时执行异步请求
				console.log("数据变化")
				this.startTime = new Date()
				this.getHistoriList()
				this.getDataView()
			}
		},
		created() {
			console.log("创建组件")
			// this.startTime = new Date()
			// this.getHistoriList()
			// this.getDataView()
			this.timer = setInterval(() => {
				if(this.$storage.getItem('token')) {
					this.getLatestList()
				}
			}, 30000)
		},
		destroyed() {
			clearInterval(this.timer)
		},
		methods: {
			minutesBetweenDates(date1, date2) {
				const oneMinute = 60 * 1000; // 1分钟的毫秒数
				const diff = Math.abs(date2.getTime() - date1.getTime()); // 计算时间差
				return Math.floor(diff / oneMinute) // 转换为分钟
			},
			viewAll() {
				uni.navigateTo({
					url: "/pages/radar/user_ai"
				})
			},
			bindUserInvite() {
				uni.navigateTo({
					url: "/pages/radar/user_invite"
				})
			},
			deduplicateArrayById(arr) {
				const idSet = new Set();
				const result = [];

				for (let obj of arr) {
					if (!idSet.has(obj.id)) {
						idSet.add(obj.id);
						result.push(obj);
					}
				}

				return result;
			},
			// 邀请用户
			iviteUser() {
				if (!this.$storage.getItem('token')) {
					return this.$utils.redirectToLogin(true)
				}
				uni.navigateTo({
					url: "/pages/common/pages/invite"
				})
			},
			// 获取数据总览
			getDataView() {
				console.log("获取邀请人数统计")
				const customerId = uni.getStorageSync("basicUnserInfo").customerId
				api.post(`/user/api/radar/totalDataView`,{}).then((res) => {
					if (res && res.code == 0) {

						this.dataView = res.data
						this.gridList.map(item => {
							item.value = this.dataView?.inviteDataDto?.[item.key] || 0
						})
						this.inviteData = res.data.inviteDataDto
						this.tradeDataDto = res.data.tradeDataDto
						this.shareDataDto = res.data.shareDataDto
					}
				})
			},
			// 获取历史数据列表
			getHistoriList() {
				const startTime = this.$moment(this.startTime).format('YYYY-MM-DD HH:mm:ss')
				this.startTime = startTime
				const basicUserInfo = uni.getStorageSync("basicUnserInfo")
				api.post("/user/api/radar/aiPageData", {
					consumerIds: basicUserInfo.consumerIds,
					tenantId: this.tenantId,
					size: 2,
					current: 1,
					startTime: startTime
				}).then((res) => {
					res.data.records.map(item => {

						if ((new Date().getTime() - new Date(item.createTime).getTime()) <= 60000 * 3) {
							item.timeStr = "刚刚"
						} else if ((new Date().getTime() - new Date(item.createTime).getTime()) < 60000 *
							60) {

							const minutes = this.minutesBetweenDates(new Date(item.createTime), new Date())
							item.timeStr = `${minutes}分钟前`
						} else {
							item.timeStr = item.createTime
						}
					})
					this.aiDataList = res.data.records

					this.getLatestList()
				})
			},
			// 获取最新数据
			getLatestList() {
				const basicUserInfo = uni.getStorageSync("basicUnserInfo")
				console.log(123)
				console.log(basicUserInfo.consumerIds)
				api.post("/user/api/radar/aiNewData", {
					consumerIds: basicUserInfo.consumerIds,
					tenantId: this.tenantId,
					size: 2,
					current: 1,
					startTime: this.startTime
				}).then((res) => {
					console.log("数据请求")
					console.log(res)
					console.log(this.aiDataList)
					let data = res.data.records
					data.map(item => {

						if ((new Date().getTime() - new Date(item.createTime).getTime()) <= 60000 * 3) {
							item.timeStr = "刚刚"
						} else if ((new Date().getTime() - new Date(item.createTime).getTime()) < 60000 *
							60) {

							const minutes = this.minutesBetweenDates(new Date(item.createTime), new Date())
							item.timeStr = `${minutes}分钟前`
						} else {
							item.timeStr = item.createTime
						}
					})
					const newData = data.concat(this.aiDataList)
					const deduplicatedArr = this.deduplicateArrayById(newData);
					this.aiDataList = deduplicatedArr.splice(0, 2)

				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.page {}

	.red_back{
		background: rgba(247,61,63,0.1) !important;
	}
	.green_back{
		background: rgba(0,197,168,0.1) !important;
	}
	.user_radar_index {
		@include set_padding(12rpx, 16rpx);

		.ai_box {
			border: 1rpx solid #EF651C;
			position: relative;
			min-height: 166rpx;

			// @include flex_box(column,nowrap,flex-start,center);
			.ai_icon {
				width: 124rpx;
				height: 36rpx;
				position: absolute;
				right: -1rpx;
				top: 0;
			}

		}

		.invitee_box {
			@include set_padding(12rpx, 12rpx);
			background: linear-gradient(135deg, #FE5A1C 0%, #FE451C 100%);

			.title_box {
				@include flex_box(row, nowrap, space-between, center);

				.invite_btn {
					background: #FEDA1C;
					color: #973A09;
				}
			}





			.cols_box {
				@include flex_box(row, nowrap, center, center);

				.grid {
					width: calc(100% / 4);
				}
			}
		}

		.hitory_box {
			@include set_padding(8rpx, 8rpx);


		}

		.history_title {
			@include flex_box(row, nowrap, space-between, center);
		}

		.card_box {
			@include flex_box(row, nowrap, space-between, center);

			.single_card {
				background: #F5F7FB;
				@include set_padding(8rpx, 8rpx);
			}
		}

		.share_box {

			.share_title {
				color: #1D2129;
			}

			.share_content {
				@include set_padding(8rpx, 8rpx);

			}
		}

		.consum_box {
			@include set_padding(8rpx, 8rpx);

			.consum_count {
				@include flex_box(row, nowrap, space-between, center);

				.single_count {
					width: calc((100% - 18rpx) / 2);
				}
			}

			.times_box {
				background: #F5F7FB;
				@include flex_box(row, nowrap, flex-start, center);

				.single_time {
					flex: 1;
					@include flex_box(column, nowrap, center, left);
					padding-left: 40rpx;
					.green_arrow {
						width: 24rpx;
						height: 24rpx;
						display: inline-block;
					}
				}

				.percent_box {
					// border-left: 2rpx dashed #D7D7D7;
				}

				.green_box {
					color: #00C5A8;
				}

				.red_box {
					color: #F73D3F;
				}
			}
		}

	}
</style>